<template>
  <v-toolbar dark color="primary">
    <v-btn @click="$router.replace({ path: '/home' })" type="text" icon>
      <j-icon :size="28" color="#ffffff">mdi-arrow-left</j-icon>
    </v-btn>
    <v-autocomplete
      v-if="searchType === messageType.JW"
      v-model="model"
      :loading="jwLoading"
      :items="jwItems"
      :search-input.sync="search"
      flat
      hide-no-data
      hide-details
      @keyup.enter="handleSearyJwSearch"
      @input="handelJwAppend"
      item-text="text"
      item-value="text"
      placeholder="徒1:1-10"
    >
      <template #append>
        <v-btn text @click="handleSearyJwSearch" :loading="jwLoading">搜索</v-btn>
      </template>
      <template #item="data">
        <v-card elevation="0">
          <v-card-title>
            {{ data.item.text }}
          </v-card-title>
          <v-card-text v-html="data.item.longtextarr"> </v-card-text>
        </v-card>
      </template>
    </v-autocomplete>
    <v-combobox
      v-else-if="searchType === messageType.ZM || searchType === messageType.GP"
      v-model="model"
      :items="items"
      item-text="title"
      item-value="_id"
      hide-selected
      @change="handelAppend"
      :loading="loading"
      flat
      style="margin-top: 28px"
    >
      <template v-slot:item="{ item }">
        <div>{{ item.title }}</div>
        <div style="font-size: 8px; color: #bdbdbd; padding: 5px; box-sizing: border-box">
          {{ zmtypeCreate(item.shijiIndex) }}
        </div>
      </template>
    </v-combobox>

    <v-menu offset-y>
      <template v-slot:activator="{ on, attrs }">
        <v-btn class="ml-2" text v-bind="attrs" v-on="on">
          {{ searchType === messageType.JW ? "经文" : searchType === messageType.ZM ? "赞美" : "歌谱" }}
          <j-icon :size="10" color="#ffffff">down-outlined</j-icon>
        </v-btn>
      </template>
      <v-list>
        <v-list-item
          v-for="(item, index) in [
            { title: '赞美', value: messageType.ZM },
            { title: '歌谱', value: messageType.GP },
            { title: '经文', value: messageType.JW },
          ]"
          :key="index"
          @click="() => handleMenuChange(item.value)"
        >
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </v-toolbar>
</template>
<script>
import JcBar from "@/layout/JcBar.vue";
import { alert } from "@/utils/utils";
import { getJingWen } from "@/api/jingwen";
import { messageType } from "../config";

export default {
  name: "JcCombobox",
  props: {
    // 全部赞美数据
    items: {
      type: Array,
      default: () => [],
    },
    // 赞美类型数组
    zmtype: {
      type: Array,
      default: () => [],
    },
    loading: {
      type: [Boolean, String],
      default: false,
    },
    zmIds: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      messageType,
      model: "",
      searchType: messageType.ZM,
      jwItems: [],
      select: null,
      jwLoading: false,
      search: "",
    };
  },
  components: {
    JcBar,
  },
  computed: {
    zmtypeCreate() {
      if (this.zmtype.length === 0) {
        return "";
      }
      return (id) => this.zmtype.filter((item) => item.index === id)[0].shiJiName;
    },
  },
  methods: {
    init() {
      if (this.zmIds !== "" && this.items.length !== 0) {
        try {
          const model = this.items.filter((item) => item._id === this.zmIds)[0];
          this.model = model;
          this.handelAppend();
        } catch (err) {
          console.log("出错了00", err);
        }
      }
    },
    handelAppend() {
      if (typeof this.model === "string") {
        alert({ type: "error", msg: "没有找到这首赞美哦" });
        return;
      }

      this.$emit("change", { ...this.model, messageType: this.searchType });
    },
    handleSearcyTypeChange() {
      console.log(this.searchType);
    },
    async handleSearyJwSearch(e) {
      this.querySelections(this.search);
    },
    async querySelections(v) {
      if (v === null || v === undefined || v === "") return;
      this.jwLoading = true;
      try {
        const res = await getJingWen(v);
        // console.log('res-->', res);
        if (res.data && res.data.length > 0) {
          this.jwItems = [
            {
              text: this.search,
              data: res.data,
              longtextarr: res.data.map((item) => item.jie + item.data).join("\n"),
              value: this.search,
              messageType: messageType.JW,
            },
          ];
        } else {
          this.jwItems = [];
        }
      } catch (e) {
        console.log(e);
      } finally {
        this.jwLoading = false;
      }
    },
    handelJwAppend() {
      console.log(this.model);
      if (this.model) {
        this.$emit(
          "change",
          this.jwItems.find((item) => item.text === this.model)
        );
      }
    },
    handleMenuChange(value) {
      this.searchType = value;
      this.$emit("changeType", value);
    },
  },
  watch: {
    zmIds() {
      this.init();
    },
    items() {
      this.init();
    },
  },
};
</script>
<style scoped>
.tip {
  position: absolute;
  top: 560px;
  width: 260px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
